.login-background {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
li {
  list-style: none;
  float: left;
}
ul img {
  width: 100vw;
  /* 保证图片尺寸统一 */
  height: auto;
}
.login-background ul li {
  position: absolute;
  opacity: 0; /* 如果不改变默认透明度,那么后续的执行动画需要从最后一张开始,采用倒序 */
  /* 动画设置 */
  animation-name: fade;
  animation-duration: 20s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-iteration-count: infinite;
}

@keyframes fade {
  0% {
    /* 透明度实现 */
    opacity: 0;
    /* 图层实现 */
    z-index: 0;
  }
  25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: 0;
    z-index: 0;
  }
}

​.login-background ul li:nth-child(1) {
  animation-delay: 0s;
}
.login-background ul li:nth-child(2) {
  animation-delay: 5s;
}
.login-background ul li:nth-child(3) {
  animation-delay: 10s;
}
.login-background ul li:nth-child(4) {
  animation-delay: 15s;
}
